<template>
    <a-dropdown class="w-full h-full flex items-center justify-center">
      <a class="ant-dropdown-link" @click.prevent>
        {{ user.username }}
      </a>
      <template #overlay>
        <a-menu style="border-left: 2px solid rgb(24, 144, 255)">
          <a-menu-item>
            <a @click="changePassword">{{$t('userInfo.changePassword')}}</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="logout">{{$t('userInfo.logout')}}</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  <ChangePassword v-model:visible="data.visible" @ok="logout" />
</template>

<script lang="ts" setup>
import { useRouter} from "vue-router";
import {message} from "ant-design-vue";
import ChangePassword from "@/components/ChangePassword.vue";

const data=reactive({
  visible:false
})

const router = useRouter();

const store = useStore()
const {user} = store

const changePassword = () => {
  data.visible = true;
}

const  logout =async () => {

  await request.post('/api/dynamic-mock/auth/logout', {})
  const key = 'logout';
  message.open({
    key,
    type:"loading",
    duration:0,
    content: "",
  })

  await router.push({
    name:"login"
  })

  message.destroy(key)
}

</script>

<style></style>
